import { size } from "@floating-ui/dom";
import BsButton from "@lib/Button";
import BsDropdown from "@lib/Dropdowns";
import type { RouteDefinition } from "@solidjs/router";
import { classList } from "solid-js/web";

const DropdownDemo = () => {
  return (
    <div>
      <h2>Basic</h2>
      <div class="d-flex grid gap-3 mb-3">
        <BsDropdown
          defaultProps={{
            variant: "secondary",
            size: "sm",
          }}
          listProps={{
            classList: { "dropdown-menu-dark": true },
          }}
          items={[
            <BsDropdown.Item as="a" href="#">
              1
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              2
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              3
            </BsDropdown.Item>,
          ]}
        >
          Dropdown button
        </BsDropdown>

        <BsDropdown
          defaultProps={{
            variant: "secondary",
          }}
          listProps={{
            classList: { "dropdown-menu-dark": true },
          }}
          items={[
            <BsDropdown.Item as="a" href="#">
              1
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              2
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              3
            </BsDropdown.Item>,
          ]}
        >
          Large Dropdown button
        </BsDropdown>

        <BsDropdown
          defaultProps={{
            variant: "secondary",
            size: "lg",
          }}
          listProps={{
            classList: { "dropdown-menu-dark": true },
          }}
          items={[
            <BsDropdown.Item as="a" href="#">
              1
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              2
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              3
            </BsDropdown.Item>,
          ]}
        >
          Small Dropdown button
        </BsDropdown>

        <BsDropdown
          split
          defaultProps={{
            variant: "secondary",
          }}
          listProps={{
            classList: { "dropdown-menu-dark": true },
          }}
          items={[
            <BsDropdown.Header>header 1</BsDropdown.Header>,
            <BsDropdown.Item as="a" href="#">
              1
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              2
            </BsDropdown.Item>,
            <BsDropdown.Header>header 2</BsDropdown.Header>,
            <BsDropdown.Item as="a" href="#">
              3
            </BsDropdown.Item>,
          ]}
        >
          <BsButton variant="secondary">Small Dropdown button</BsButton>
        </BsDropdown>
      </div>
      <div class="d-flex grid gap-3 mb-3">
        <BsDropdown
          direction="up"
          defaultProps={{
            variant: "secondary",
            size: "sm",
          }}
          listProps={{
            classList: { "dropdown-menu-dark": true },
          }}
          items={[
            <BsDropdown.Item as="a" href="#">
              1
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              2
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              3
            </BsDropdown.Item>,
          ]}
        >
          Dropdown button
        </BsDropdown>
        <BsDropdown
          direction="end"
          defaultProps={{
            variant: "secondary",
            size: "sm",
          }}
          listProps={{
            classList: { "dropdown-menu-dark": true },
          }}
          items={[
            <BsDropdown.Item as="a" href="#">
              1
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              2
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              3
            </BsDropdown.Item>,
          ]}
        >
          Dropdown button
        </BsDropdown>
        <BsDropdown
          direction="start"
          defaultProps={{
            variant: "secondary",
            size: "sm",
          }}
          listProps={{
            classList: { "dropdown-menu-dark": true },
          }}
          items={[
            <BsDropdown.Item as="a" href="#">
              1
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              2
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              3
            </BsDropdown.Item>,
          ]}
        >
          Dropdown button
        </BsDropdown>
        <BsDropdown
          centered
          defaultProps={{
            variant: "secondary",
            size: "sm",
          }}
          listProps={{
            classList: { "dropdown-menu-dark": true },
          }}
          items={[
            <BsDropdown.Item as="a" href="#">
              1
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              2
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              3
            </BsDropdown.Item>,
          ]}
        >
          Dropdown button
        </BsDropdown>
      </div>
      <div class="d-flex grid gap-3 mb-3">
      <BsDropdown
          alignment={'end'}
          defaultProps={{
            variant: "secondary",
            size: "sm",
          }}
          listProps={{
            classList: { "dropdown-menu-dark": true },
          }}
          items={[
            <BsDropdown.Item as="a" href="#">
              1
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              2
            </BsDropdown.Item>,
            <BsDropdown.Item as="a" href="#">
              3
            </BsDropdown.Item>,
          ]}
        >
          Dropdown button
        </BsDropdown>
      </div>
    </div>
  );
};

export const DropdownDemoRoute: RouteDefinition = {
  path: "/dropdown",
  component: DropdownDemo,
};

export default DropdownDemo;
